<template>
  <lay-config-provider :theme="currentTheme">
    <div :class="$style.indexPage">
      <div :class="$style.headBlock">
        <div :class="$style.headLeft">
          <img :class="$style.headLogo" loading="lazy" alt="logo" src="/logo.png" />
          <div :class="$style.headText">福汇交易所</div>
        </div>
        <div :class="$style.headRight">
          <div :class="$style.countArea">
            <img :class="$style.countIcon" alt="" :src="countFlag ? '/mimakejian.png' : '/mimabukejian.png'" @click="changeCountFlag" />
            <div :class="$style.countText">总收益：</div>
            <div :class="[$style.countNumber, countFlag ? $style.countGreen : $style.countGrey]">{{ countFlag ? countTotal + ' USD' : '***' }}</div>
            <div :class="$style.countText">可用余额：</div>
            <div :class="[$style.countNumber, countFlag ? $style.countBlack : $style.countGrey]">{{ countFlag ? countUsable : '***' }} USD</div>
          </div>
          <div :class="$style.headLine"></div>
          <lay-dropdown>
            <div :class="$style.dropTitle">
              <div :class="$style.dropText">{{ accountList[accountIndex] }}</div>
              <img :class="$style.dropIcon" alt="" src="/jiantouxiahei.png" />
            </div>
            <template #content>
              <lay-dropdown-menu>
                <lay-dropdown-menu-item v-for="(item, index) in accountList" :key="index" :class="accountIndex == index ? 'dropBlue' : ''" @click="changeAccountIndex(index)">
                  {{ item }}
                </lay-dropdown-menu-item>
              </lay-dropdown-menu>
            </template>
          </lay-dropdown>
          <div :class="$style.headLine"></div>
          <lay-dropdown>
            <div :class="$style.dropTitle">
              <div :class="$style.dropText">{{ languageList[languageIndex] }}</div>
              <img :class="$style.dropIcon" alt="" src="/jiantouxiahei.png" />
            </div>
            <template #content>
              <lay-dropdown-menu>
                <lay-dropdown-menu-item v-for="(item, index) in languageList" :key="index" :class="languageIndex == index ? 'dropBlue' : ''" @click="changeLanguageIndex(index)">
                  {{ item }}
                </lay-dropdown-menu-item>
              </lay-dropdown-menu>
            </template>
          </lay-dropdown>
          <div :class="$style.userArea" @click="showModal(0)">
            <img :class="$style.userIcon" alt="" src="/touxiang.png" />
            <div :class="$style.userInfo">
              <div :class="$style.userName">
                {{ userName }}
              </div>
              <div :class="$style.userEmail">
                {{ userEmail }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="$style.contentBlock">
        <div :class="$style.leftArea">
          <div :class="$style.menuA">
            <div v-for="(item, index) in menuAList" :key="index" :class="[$style.menuAItem, currentMenuA == index ? $style.menuAItemActive : '']">
              <div :class="$style.menuAInner" @click="changeMenuA(index)">
                <img :class="$style.menuAIcon" alt="" :src="currentMenuA == index ? item.icon1 : item.icon2" />
                <div :class="[$style.menuAText, currentMenuA == index ? $style.menuABlue : '']">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div :class="$style.menuB">
            <div v-for="(item, index) in menuBList" :key="index" :class="$style.menuBItem">
              <img :class="$style.menuBIcon" alt="" :src="item" @click="changeMenuB(index)" />
            </div>
          </div>
        </div>
        <div :class="$style.rightArea">
          <component :is="activePage" :ref="activePage" />
        </div>
      </div>
    </div>

    <!-- start modal here -->
    <Modal-Pop v-show="isModalVisible" @close="closeModal" ref="ModalPop" />
    <FrameSM v-show="isModal1Visible" @close="closeModal1" />
    <FrameSM2 v-show="isModal2Visible" @close="closeModal2" />
  </lay-config-provider>
</template>
<script>
import { defineComponent } from "vue";
import MainComp from "../components/MainComp.vue";
import MainComp2 from "../components/MainComp2.vue";
import LastModal1 from "../components/LastModal1.vue";
import IEOComp from "../components/IEOComp.vue";
import DeFiComp from "../components/DeFiComp.vue";
import NoticeComp from "../components/NoticeComp.vue";
import ModalPop from "../components/ModalPop.vue";
import FrameSM from "../components/FrameSM.vue";
import FrameSM2 from "../components/FrameSM2.vue";

export default defineComponent({
  name: "Index",
  components: {
    MainComp,
    MainComp2,
    LastModal1, 
    IEOComp,
    DeFiComp,
    NoticeComp,
    ModalPop,
    FrameSM,
    FrameSM2,
  },
  data() {
    return {
      activePage: 'MainComp',
      menuAList: [
        { name: '自选', comp: 'MainComp', icon1: '/zixuan1.png', icon2: '/zixuan2.png' },
        { name: '收藏', comp: 'MainComp2', icon1: '/shoucang1.png', icon2: '/shoucang2.png' },
        { name: '新闻', comp: 'LastModal1', icon1: '/xinwen1.png', icon2: '/xinwen2.png' },
        { name: 'IEO', comp: 'IEOComp', icon1: '/ieo1.png', icon2: '/ieo2.png' },
        { name: 'DeFi', comp: 'DeFiComp', icon1: '/defi1.png', icon2: '/defi2.png' },
        { name: '公告', comp: 'NoticeComp', icon1: '/gonggao1.png', icon2: '/gonggao2.png' },
      ],
      currentMenuA: 0,
      menuBList: ['/anheimoshi.png', '/gerenzhongxin.png', '/kefu.png', '/pingcangjinggao.png', '/tongzhi.png', '/tuichu.png'],
      currentMenuB: 0,
      countFlag: true,
      countTotal: '0',
      countUsable: '0.000',
      accountIndex: 0,
      accountList: ['真实账户', '模拟账户'],
      languageIndex: 0,
      languageList: ['简体中文', 'English', 'Français', 'Deutsch', '日本語', 'Italiano', '한국어', 'Türk'],
      userName: 'fasdasd',
      userEmail: 'asdawd@asd.com',
      isModalVisible: false,
      isModal1Visible: false,
      isModal2Visible: false,
      currentTheme: 'light',
    };
  },
  methods: {
    changeLanguageIndex(index) {
      this.languageIndex = index;
    },
    changeAccountIndex(index) {
      this.accountIndex = index;
    },
    changeCountFlag() {
      this.countFlag = !this.countFlag;
    },
    changeMenuB(index) {
      this.currentMenuB = index;
      if (index == 0) {
        if (this.currentTheme == 'light') {
          this.currentTheme = 'dark';
        } else {
          this.currentTheme = 'light';
        }
      } else if (index == 1) {
        this.showModal(0);
      } else if (index == 2) {

      } else if (index == 3) {
        this.showModal1();
      } else if (index == 4) {
        this.showModal2();
      } else if (index == 5) {
        this.showModal(12);
      }
    },
    changeMenuA(index) {
      this.currentMenuA = index;
      this.activePage = this.menuAList[index].comp;
      window.sessionStorage.setItem('menuA', index);
      if(index==0){
        this.$nextTick(() => {
          this.$refs.MainComp.getCtlist();
        })
      }else if(index==1){

      }else if(index==2){
        
      }else if(index==3){
        
      }else if(index==4){
        this.$nextTick(() => {
          this.$refs.DeFiComp.getOreList();
          // this.$refs.DeFiComp.getProfitlist();          
        })
      }else if(index==5){
        
      }
    },
    showModal(index) {
      this.isModalVisible = true;
      this.$nextTick(() => {
        this.$refs.ModalPop.changeMenu(index);
        this.$refs.ModalPop.accountType = this.accountIndex;
      })
    },
    showModal1() {
      this.isModal1Visible = true;
    },
    showModal2() {
      this.isModal2Visible = true;
    },
    closeModal() {
      this.isModalVisible = false;
    },
    closeModal1() {
      this.isModal1Visible = false;
    },
    closeModal2() {
      this.isModal2Visible = false;
    },
    getUserInfo() {
      let that = this;
      let loadIndex = that.$layer.load();
      that.$axios.post('/api/User/info', {}).then((res) => {
        that.$layer.close(loadIndex);
        if (res.data.code != 200) {
          that.$layer.msg(res.data.message, { time: 1000 });
          return;
        }
      }).catch((err) => {
        that.$layer.close(loadIndex);
        that.$layer.msg('用户信息获取失败', { time: 1000 });
      });
    },
  },
  created() {
    let menuA = window.sessionStorage.getItem('menuA') || 0;
    this.changeMenuA(menuA);
    this.getUserInfo();
  },
});
</script>
<style module>
.indexPage {
  width: 100%;
  height: 100vh;
}

.headBlock {
  width: 100%;
  height: 60px;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 14px 10px 10px;
}

.headLeft {
  display: flex;
  align-items: center;
}

.headLogo {
  height: 40px;
  width: 40px;
}

.headText {
  font-family: var(--font-source-han-sans-cn);
  font-size: 20px;
  font-weight: 500;
  color: #000000;
  margin-left: 5px;
}

.headRight {
  display: flex;
  align-items: center;
}

.countArea {
  display: flex;
  align-items: center;
}

.countIcon {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.countText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #909399;
  margin-left: 20px;
}

.countNumber {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 500;
}

.countGreen {
  color: #13ce66;
}

.countBlack {
  color: #515a6e;
}

.countGrey {
  color: #909399;
}

.headLine {
  width: 1px;
  height: 16px;
  background: #dcdfe6;
  margin-left: 20px;
  margin-right: 20px;
}

.dropTitle {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  line-height: 14px;
  color: #909399;
}

.dropIcon {
  width: 16px;
  height: 16px;
  margin-left: 10px;
}

.userArea {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 40px;
}

.userIcon {
  width: 40px;
  height: 40px;
}

.userInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
}

.userName {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: normal;
  color: #515a6e;
}

.userEmail {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 350;
  color: #909399;
}

.contentBlock {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
  box-sizing: border-box;
  padding-top: 5px;
}

.leftArea {
  width: 60px;
  height: 100%;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow-y: auto;
}

.menuA {
  width: 100%;
  font-family: var(--font-source-han-sans-cn);
}

.menuAItem {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.menuAItemActive {
  background-color: #e8f4ff;
}

.menuAInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.menuAIcon {
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}

.menuAText {
  font-size: 14px;
  font-weight: 300;
  color: #515a6e;
}

.menuABlue {
  color: #1890ff;
}

.menuB {
  width: 100%;
}

.menuBItem {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 15px 0;
}

.menuBIcon {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.rightArea {
  width: calc(100% - 60px);
  height: 100%;
  box-sizing: border-box;
  padding-left: 5px;
  overflow-x: auto;
}
</style>
<style scoped>
.layui-dropdown-menu :deep(.dropBlue) {
  color: #1890ff;
}
</style>
